<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />

		<title>Mask Demo</title>

		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" />
	</head>

	<body>
		<header class="container">
			<h1>Mask Demo</h1>
		</header>

		<div class="container">
			<form id="form">
				<div class="control-group input-append">
					<input type="text" name="product" id="product" data-required />

					<label for="product" class="add-on"><span class="icon-asterisk"></span> Product</label>
				</div>

				<div class="control-group input-append">
					<input type="text" name="price" id="price" placeholder="R$ 0,00" data-pattern="^(?:R\$)?\s*(\d+)(?:[,\.](\d)(\d)?)?\d*$" data-mask="R$ ${1},${2:`0`}${3:`0`}" />

					<label for="price" class="add-on">Price</label>
				</div>

				<div class="control-group input-append">
					<select name="category" id="category" data-required>
						<option value="">Select a category</option>

						<option value="1">Gategory 1</option>

						<option value="2">Gategory 2</option>

						<option value="3">Gategory 3</option>
					</select>

					<label for="category" class="add-on"><span class="icon-asterisk"></span> Category</label>
				</div>

				<div class="btn-group">
					<button type="submit" class="btn btn-primary">Send</button>

					<button type="reset" class="btn">Reset</button>
				</div>
			</form>
		</div>

		<script src="vendor/jquery-1.9.0.min.js"></script>

		<script src="../jquery-validate.js"></script>

		<script>
			$('form').validate({
				onChange : true,
				eachValidField : function() {

					$(this).closest('div').removeClass('error').addClass('success');
				},
				eachInvalidField : function() {

					$(this).closest('div').removeClass('success').addClass('error');
				}
			});
		</script>
	</body>
</html>